/*
 * @Author: wangtao
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: kanglang
 * @LastEditTime: 2021-01-22 21:14:04
 * @Description:
 */
import React, { Fragment } from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  ImageBackground,
  TouchableOpacity,
} from 'react-native';
import { faceCard, iconCamera } from '@/images';
import { Button, msg, DashLine } from '@/common';
import {
  isAndroid,
  splitLineColorLightGray,
  px2dp,
  fontColorSecDeepGray,
} from '@/styles';
import baseConfig from '@/config/baseConfig.js';

const { fileUrl } = baseConfig;

export default class CameraCard extends React.Component {
  onCatchImage = () => {
    const { type } = this.props;
    this.props.onCatchImage && this.props.onCatchImage(type);
  }

  render() {
    const { title, icon, exempleImg } = this.props;
    return (
      <View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between' }}>
        <TouchableOpacity
          style={styles.card}
          activeOpacity={0.8}
          onPress={this.onCatchImage}
        >
          {icon ? (
            <Image
              source={{ uri: fileUrl + icon }}
              resizeMode='stretch'
              style={styles.img}
            />
          ) : (
            <>
              <Image
                source={iconCamera}
                resizeMode='stretch'
                style={styles.cameraImg}
              />
              <Text style={styles.desc}>{title}</Text>
            </>
          )}
        </TouchableOpacity>
        <View style={styles.card}>
          <Image
            source={{ uri: exempleImg }}
            resizeMode='stretch'
            style={styles.img}
          />
          <View style={styles.slBox}>
            <Text style={styles.slText}>示例</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  card: {
    width: px2dp(330),
    height: px2dp(202),
    borderRadius: px2dp(14),
    marginTop: px2dp(32),
    backgroundColor: splitLineColorLightGray,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden'
  },
  cameraImg: {
    width: px2dp(85),
    height: px2dp(85),
  },
  img: {
    width: '100%',
    height: '100%',
  },
  desc: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
    marginTop: px2dp(24),
  },
  slBox: {
    position: 'absolute',
    bottom: px2dp(16),
    right: px2dp(16),
    backgroundColor: 'rgba(0,0,0,0.4)',
    borderRadius: px2dp(6),
    paddingHorizontal: px2dp(8),
    paddingVertical: px2dp(3)
  },
  slText: {
    fontSize: px2dp(22),
    color: '#FFFFFF'
  }
});
